<template>
  <div>
    <dog
      v-for="(item, index) in list"
      :key="index"
      :info="item"
      @clickAction="clickFn"
    ></dog>
    <h3>您喜欢的景色如下：</h3>
    <ul>
      <li v-for="(item, index) in favorite" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
import dog from "./components/Dog2";
export default {
  components: {
    dog,
  },
  methods: {
    clickFn(val) {
      this.favorite.push(val);
    },
  },
  data() {
    return {
      favorite: [],
      list: [
        {
          dogImgUrl:
            "https://images.unsplash.com/photo-1542332213-9b5a5a3fad35?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=2550&q=80",
          dogName: "大山",
        },
        {
          dogImgUrl:
            "https://images.unsplash.com/photo-1544965850-6f8a66788f9b?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=2582&q=80",
          dogName: "树林",
        },
        {
          dogImgUrl:
            "https://images.unsplash.com/photo-1545852528-fa22f7fcd63e?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1951&q=80",
          dogName: "河流",
        },
        {
          dogImgUrl:
            "https://images.unsplash.com/photo-1547532182-bf296f6be875?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=2000&q=80",
          dogName: "大海",
        },
        {
          dogImgUrl:
            "https://images.unsplash.com/photo-1555993539-1732b0258235?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1950&q=80",
          dogName: "古迹",
        },
        {
          dogImgUrl:
            "https://images.unsplash.com/photo-1557626204-59dd03fd2d31?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=2550&q=80",
          dogName: "星空",
        },
      ],
    };
  },
};
</script>

<style>
h3 {
  padding-top: 50px;
}
</style>